<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">

<head>
<title>YogaApp Login</title>
	<!-- bootstrap的css核心，定义了很多class -->
	<link rel="stylesheet" type="text/css" href="/css/bootstrap.css"/>
	<script type="text/javascript" src="/js/jquery.min.js"></script>
	<!--生成弹框、提示框、下拉菜单  -->
	<script type="text/javascript" src="/bootstrap/popper.min.js"></script>
	<!--bootstrap的js、用于响应事件  -->
	<script type="text/javascript" src="/bootstrap/bootstrap.min.js"></script>
	<link href="/css/style.css" rel="stylesheet" type="text/css" media="all"/>
	<!-- 先引入 Vue -->
	<script src="../js/vue.js"></script>
	<!--引入axios -->
	<script src="../js/axios.js"></script>

<!-- Meta tag Keywords -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8" />
<meta name="keywords"
	content="Fitness Login Form Responsive Widget,Login form widgets, Sign up Web forms , Login signup Responsive web form,Flat Pricing table,Flat Drop downs,Registration Forms,News letter Forms,Elements" />
<!-- Meta tag Keywords -->
<!-- css files -->
<link rel="stylesheet" href="css/style3.css" type="text/css" media="all" />
<!-- Style-CSS -->
<!--<link rel="stylesheet" href="css/fontawesome-all.css">-->
<!-- Font-Awesome-Icons-CSS -->
<!-- //css files -->
<!-- web-fonts -->
<link
	href="//fonts.googleapis.com/css?family=Sigmar+One&amp;subset=latin-ext,vietnamese"
	rel="stylesheet">
<link
	href="//fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i"
	rel="stylesheet">
<!-- //web-fonts -->
</head>

<body>

<div>
	<div id="navigationBar">
		<div class="header-bottom">
			<div class="container">
				<nav class="navbar navbar-default">
					<!-- Brand and toggle get grouped for better mobile display -->
					<div class="navbar-header">
						<button type="button" class="navbar-toggle collapsed"
								data-toggle="collapse"
								data-target="#bs-example-navbar-collapse-1">
							<span class="sr-only">Toggle navigation</span> <span
								class="icon-bar"></span> <span class="icon-bar"></span> <span
								class="icon-bar"></span>
						</button>
						<div class="logo">
							<h1>
								<a class="navbar-brand" href="/index.html">yoga</a>
							</h1>
						</div>
					</div>
					<!-- Collect the nav links, forms, and other content for toggling -->
					<div class="collapse navbar-collapse nav-wil"
						 id="bs-example-navbar-collapse-1">
						<nav class="cl-effect-1" id="cl-effect-1">
							<ul class="nav navbar-nav">
								<!--<li><a href="#home" class="active" data-hover="Home">首页</a></li>
                                <li><a href="#about" class="scroll" data-hover="About">关于</a></li>-->
								<!--<li><a href="#services" class="scroll" data-hover="Services">私教课程</a></li>-->
								<li><a href="/index.html" class="scroll" data-hover="student">学员风采</a></li>
								<li v-if="roles != 0"><a href="/ClubMap.html"
														 class="scroll" data-hover="Team">场馆地图</a></li>
								<li v-if="roles != 0"><a href="/CoachMap.html"
														 class="scroll" data-hover="Team">教练地图</a></li>
								<li v-if="roles == 1||roles == 2"><a href="/student/showMe"
																	 class="scroll" data-hover="Team">学员信息完善</a></li>
								<li v-if="roles == 1||roles == 3"><a href="/coach/showMe"
																	 class="scroll" data-hover="Team">教练信息完善</a></li>
								<li v-if="roles == 1||roles == 4"><a
										href="/yogaclub/showMe" class="scroll" data-hover="Team">场馆信息完善</a></li>
								<li><a href="#gallery" class="scroll" data-hover="Projects">会馆图片</a></li>
								<li v-if="roles == -1"><a href="/login.html" class="scroll"
														  data-hover="login">登陆</a></li>
								<li v-if="roles == -1"><a href="/register.html"
														  class="scroll" data-hover="register">注册</a></li>
								<li v-if="roles == 5"><a href="/adminindex.html"
														 class="scroll" data-hover="register">管理</a></li>
								<li
										v-if="roles == 1||roles == 2||roles == 3||roles == 4||roles ==5"><a
										href="/logout">注销</a></li>
								<li>
									<button class="btn btn-default " type="button"
											id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true"
											aria-expanded="true"
											style="opacity: 0.5; background-color: #4CAF50;"
											v-if="roles == 4">
										我 <span class="caret"></span>
									</button>
									<ul class="dropdown-menu" style="opacity: 0.5"
										v-if="roles == 4">
										<li><a href="#">我的主页</a></li>
										<li><a href="/html/chat.html">信息中心</a></li>
									</ul>
									<button class="btn btn-default dropdown-toggle" type="button"
											id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true"
											aria-expanded="true" style="opacity: 0.5;" v-if="roles == 3">
										我 <span class="caret"></span>
									</button>
									<ul class="dropdown-menu" aria-labelledby="dropdownMenu2"
										style="opacity: 0.5" v-if="roles == 3">
										<li><a href="/orderShowCoach.html">我的订单</a></li>
										<li><a href="/coachmes.html">我的详情</a></li>
										<li><a href="/pocket.html">我的钱包</a></li>
										<li><a href="/html/chat.html">信息中心</a></li>
									</ul>
									<button class="btn btn-default dropdown-toggle" type="button"
											id="dropdownMenu3" data-toggle="dropdown" aria-haspopup="true"
											aria-expanded="true" style="opacity: 0.5;" v-if="roles == 2">
										我 <span class="caret"></span>
									</button>

									<ul class="dropdown-menu" aria-labelledby="dropdownMenu3"
										style="opacity: 0.5" v-if="roles == 2">
										<li><a href="/orderShowStudent.html">我的订单</a></li>
										<li><a href="/pocket.html">我的钱包</a></li>
										<li><a href="/html/chat.html">信息中心</a></li>
									</ul>
								</li>
							</ul>
						</nav>
					</div>


					<div class="collapse navbar-collapse nav-wil">
						<div class="cl-effect-1" id="cl-effect-2"></div>
					</div>
					<!-- /.navbar-collapse -->
				</nav>
			</div>
		</div>
	</div>
</div>

<<!--a href="/logout" >注销</a>
   
	<h1><a class="navbar-brand" href="/index.html">Yoga Login</a></h1>-->
	<!-- //title -->
	<!-- content -->
	<div class="sub-main-w3">
		<span>
			<div class="form-style-agile">
				<label> Username <i class="fas fa-user"></i>
				</label> <input placeholder="请输入11位手机号码" id="account" type="text"
					required="">
			</div>
			<div class="form-style-agile">
				<label> Password <i class="fas fa-unlock-alt"></i>
				</label> <input placeholder="请输入密码" id="pass" type="password" required="">
			</div> <!-- checkbox -->
			<div class="wthree-text">
				<ul>
					<li>
						<!-- switch -->
						<div class="checkout-w3l">
							<div class="demo5">
								<div class="switch demo3">
									<input type="checkbox"> <label> <i></i>
									</label>
								</div>
							</div>

							<a href="#">Stay Signed In</a>

						</div> <!-- //checkout --> <!-- 	<div id="lms" style="color: #E73C44;">密码有误</div> -->
						<p  id="tishi" style="color: red"></p>
					</li>
					<li><a href="findpass.html">忘记密码?</a></li>
				</ul>

			</div> <!-- //switch --> <input type="submit" value="Log In"
			onclick="login()">
		</span>

	</div>

	<div class="clear"></div>
	<!-- //content -->
	<!-- copyright -->
	<div class="footer"></div>
	<script type="text/javascript">
	$(document).ready(function(){
		
	});
		addEventListener("load", function() {
			setTimeout(hideURLbar, 0);
		}, false);

		function hideURLbar() {
			window.scrollTo(0, 1);
		}
		function login() {
			$.ajax({
				url : "user/login",
				type : "post",
				data : {
					account : $("#account").val(),
					pass : $("#pass").val()
				},
				success : function(data) {
					$("#tishi").html(data)
					if(data.indexOf('成功')!= -1){
						 window.location.href = 'index.html';
					}
				}
			})
		}

	new Vue({
		el: "#navigationBar",
		data: {roles: ""},
		beforeCreate: function () {
			var temp = this;
			axios.get("/user/getRoles").then(function (value) {
				temp.roles = value.data
			});
		}
	})
	</script>
</body>

</html>
